<template>
  <div class="bills-flow-content">
    <van-list v-model="loading"
              :finished="!isMore"
              @load="loadMore"
              class="predeposit-list">

      <div class="predeposit-item flex"
           v-for="(item) in predeposit_list"
           :key="item.lg_id">
        <div class="main flex-sub">
          <div class="floor title">{{item.lg_desc[0] || ''}}，{{item.lg_desc[1] || ''}}</div>
          <div class="floor ordersn" v-show="item.order_sn">订单号：{{item.order_sn}}</div>
          <div class="floor time">{{item.lg_addtime_text}}</div>
        </div>
        <div>
          <div class="price-info">{{item.lg_av_amount}}</div>
          <div class="margin-top-xs">{{item.status}}</div>
        </div>
      </div>
    </van-list>
    <page-bottom v-show="predeposit_list.length > 0"
                 :loading="loading"
                 :more="isMore"></page-bottom>
    <div class="empty"
         v-show="predeposit_list.length === 0">
      <empty-data></empty-data>
    </div>
  </div>
</template>

<script>
import { getPredepositList } from '@/api/memberPredeposit'
import EmptyData from '@/components/EmptyData'
import PageBottom from '@/components/PageBottom'
import { _ } from '@/utils/utils'
export default {
  name: 'BillsFlow',
  components: {
    EmptyData,
    PageBottom
  },
  data() {
    return {
      params: { page: 0, per_page: 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      predeposit_list: false
    }
  },
  methods: {
    loadMore() {
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.getPredepositList(true)
      }
    },
    getPredepositList() {
      getPredepositList(this.params)
        .then(res => {
          if (res.result.hasmore) {
            this.isMore = true
          } else {
            this.isMore = false
          }

          let temp = res.result.list
          _.each(temp, item => {
            item.lg_desc = item.lg_desc.split('，')
          })
          if (temp) {
            if (!this.predeposit_list) {
              this.predeposit_list = temp
            } else {
              this.predeposit_list = this.predeposit_list.concat(temp)
            }
          }
          this.loading = false
        })
        .catch(error => {
          this.$toast({
            type: 'fail',
            message: error.message
          })
        })
    }
  }
}
</script>

<style lang="scss">
.bills-flow-content {
  .predeposit-list {
    padding: 10px;
    padding-bottom: 0;
    .predeposit-item {
      width: 100%;
      background-color: #ffffff;
      border-radius: 5px;
      padding: 15px 10px;

      .main {
        margin-right: 10px;
        .floor + .floor {
          margin-top: 6px;
        }

        .title {
          color: #666666;
          font-size: 15px;
        }
        .ordersn {
          color: #666666;
          font-size: 12px;
        }
        .time {
          color: #888888;
          font-size: 12px;
        }
      }

      .price-info {
        color: #f73b3c;
        font-size: 16px;
      }
      & + .predeposit-item {
        margin-top: 10px;
      }
    }
  }
  .empty {
    width: 100%;
    height: 80vh;
  }
}
</style>
